<template>
  <view class="my-page">
    <!-- 顶部用户信息（区分登录/未登录） -->
    <view class="user-header">
      <view class="user-avatar">
        <image :src="userInfo.avatar || '/static/avatar-default.png'" mode="widthFix"></image>
      </view>
      <view class="user-info" v-if="isLogin">
        <view class="user-name">{{ userInfo.nickname }}</view>
        <view class="user-meta">
          <view class="meta-item">关注 {{ userInfo.followCount }}</view>
          <view class="meta-item">话题 {{ userInfo.topicCount }}</view>
        </view>
      </view>
      <view class="login-btn" v-else @click="goToLogin">
        登录
      </view>
    </view>

    <!-- 功能入口列表 -->
    <view class="func-list">
      <view class="func-item" @click="goToCollection">
        <uni-icons type="star" size="32rpx" color="#d00"></uni-icons>
        <text class="func-name">我的收藏</text>
        <uni-icons type="right" size="28rpx" color="#999"></uni-icons>
      </view>
      <view class="func-item" @click="goToHistory">
        <uni-icons type="clock" size="32rpx" color="#666"></uni-icons>
        <text class="func-name">浏览历史</text>
        <uni-icons type="right" size="28rpx" color="#999"></uni-icons>
      </view>
      <view class="func-item" @click="goToSetting">
        <uni-icons type="setting" size="32rpx" color="#333"></uni-icons>
        <text class="func-name">设置</text>
        <uni-icons type="right" size="28rpx" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 退出登录按钮（仅登录状态显示） -->
    <view class="logout-btn" v-if="isLogin" @click="logout">
      退出登录
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

const router = useRouter()
// 登录状态（实际项目从缓存/接口获取）
const isLogin = ref(false)
// 用户信息（登录后赋值）
const userInfo = ref({
  avatar: '',
  nickname: '',
  followCount: 0,
  topicCount: 0
})

// 页面加载时检查登录状态
onMounted(() => {
  // 示例：从uni.setStorageSync获取登录状态
  const loginStatus = uni.getStorageSync('isLogin')
  const userData = uni.getStorageSync('userInfo')
  if (loginStatus && userData) {
    isLogin.value = true
    userInfo.value = userData
    // 登录后更新tabBar文字（参考PPT Tips1）
    uni.setTabBarItem({
      index: 3, // My页面在tabBar中的索引（从0开始）
      text: '我的'
    })
  } else {
    // 未登录时tabBar文字
    uni.setTabBarItem({
      index: 3,
      text: '未登录'
    })
  }
})

// 跳转登录页
const goToLogin = () => {
  router.push('/pages/login/login')
}

// 跳转我的收藏
const goToCollection = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  router.push('/pages/my/collection')
}

// 跳转浏览历史
const goToHistory = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  router.push('/pages/my/history')
}

// 跳转设置页
const goToSetting = () => {
  router.push('/pages/my/setting')
}

// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录状态缓存
        uni.removeStorageSync('isLogin')
        uni.removeStorageSync('userInfo')
        // 更新状态
        isLogin.value = false
        userInfo.value = {}
        // 更新tabBar文字
        uni.setTabBarItem({
          index: 3,
          text: '未登录'
        })
        uni.showToast({ title: '退出成功' })
      }
    }
  })
}
</script>

<style scoped>
.my-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部用户信息 */
.user-header {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 40rpx 30rpx;
  border-bottom: 1px solid #eee;
}
.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
}
.user-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-info .user-name {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 500;
}
.user-meta {
  display: flex;
  font-size: 26rpx;
  color: #666;
}
.meta-item {
  margin-right: 30rpx;
}
.login-btn {
  margin-left: auto;
  padding: 15rpx 30rpx;
  border: 2rpx solid #d00;
  color: #d00;
  font-size: 28rpx;
  border-radius: 60rpx;
}

/* 功能入口列表 */
.func-list {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.func-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}
.func-item:last-child {
  border-bottom: none;
}
.func-name {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  margin-left: 20rpx;
}

/* 退出登录按钮 */
.logout-btn {
  width: 90%;
  margin: 40rpx auto 0;
  padding: 20rpx 0;
  border: 2rpx solid #999;
  color: #666;
  font-size: 30rpx;
  border-radius: 60rpx;
  text-align: center;
}
</style>